<!-- 会员订阅 -->
<template>
  <div class="px-3 mt-5">
    <div
      class="mx-3 page-header bg-gradient-info position-relative border-radius-xl"
    >
      <img
        src="../../assets/img/shapes/waves-white.svg"
        alt="pattern-lines"
        class="top-0 position-absolute opacity-6 start-0 w-100"
      />
      <div class="container pb-10 pb-lg-9 pt-7 postion-relative z-index-2">
        <div class="row">
          <div class="mx-auto text-center col-md-6">
            <h3 class="text-white">See our pricing</h3>
            <p class="text-white">
              Tradingsignal.ai presents shining data-driven beacons of crypto
              markets, sending pinpoint signals to crypto gainers.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-n8">
      <div class="container">
        <div class="tab-content tab-space">
          <div class="row justify-content-center">
            <div class="mb-4 col-lg-4 mb-lg-0">
              <div class="card">
                <div class="pt-4 pb-3 text-center card-header">
                  <span class="badge rounded-pill bg-light text-dark">
                    Annual
                  </span>
                  <h1 class="mt-2 font-weight-bold">
                    1200<small style="font-size: 36px;"> USDT/Year</small>
                  </h1>
                </div>
                <div class="pt-0 text-center card-body text-lg-start">
                  <div
                    v-for="({ label, includes }, index) of specifications"
                    :key="index"
                    class="p-2 d-flex justify-content-lg-start justify-content-center"
                  >
                    <div
                      class="text-center shadow icon icon-shape icon-xs rounded-circle bg-gradient-success"
                    >
                      <i
                        class="fas"
                        :class="includes ? 'fa-check opacity-10' : 'fa-minus'"
                      ></i>
                    </div>
                    <div class="ps-3" style="flex: 1">
                      <span class="">{{ label }}</span>
                    </div>
                  </div>
                  <a
                    class="mt-3 mb-0 btn btn-icon d-lg-block"
                    :class="`bg-gradient-info`"
                  >
                    SIGN UP
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 历史订单表格 -->
    <div class="row pb-4" style="margin-top: 72px">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4 class="mb-0" style="font-size: 20px">Order History</h4>
          </div>
          <div class="table-responsive">
            <el-table
              v-loading="loading"
              :data="tableData"
              header-row-class-name="thead-light text-secondary text-xxs font-weight-bolder opacity-7"
              @row-click="rowClick"
            >
              <el-table-column label="Order ID" min-width="120" sortable />
              <el-table-column
                prop="name"
                label="Plan"
                min-width="120"
                sortable
              >
                <template #default="{ row }"> </template>
              </el-table-column>
              <el-table-column
                prop="current_price"
                label="Current Price"
                min-width="120"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="Unit Price"
                min-width="100"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop=""
                label="Payment Method"
                min-width="150"
                sortable
              >
                <template #default="{ row }"> </template>
              </el-table-column>
              <el-table-column
                prop=""
                label="Network"
                min-width="120"
                sortable
              />
              <el-table-column prop="" label="Date" min-width="100" sortable>
              </el-table-column>
              <el-table-column
                prop=""
                label="Order Status"
                min-width="120"
                sortable
              >
              </el-table-column>
              <el-table-column prop="" label="Action" width="120" sortable />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      specifications: [
        { label: "Track signals to 80+ Crypto Projects", includes: true },
        { label: "Signal intervals as fast as 5 minutes", includes: true },
        {
          label: "Support multiple signal notification channels",
          includes: true,
        },
        {
          label:
            "Engage in seamless & flexible beacon planting and signal settings",
          includes: true,
        },
      ],
    };
  },
};
</script>

<style></style>
